<template>
  <page-header-wrapper>
    <tabList :tabList="tabList">
      <div class="searchBox">
        <div class="select">
          <span>商品：</span>
          <a-input placeholder="请输入商品名称" v-model="queryParam.order_no">
            <a-icon slot="suffix" type="search" />
          </a-input>
        </div>
        <div class="select">
          <span>商品分类：</span>
          <a-select style="width: 220px" v-model="queryParam.delivery">
            <a-select-option value="express"> 快递 </a-select-option>
            <a-select-option value="shop"> 门店自提 </a-select-option>
            <a-select-option value="delivery"> 同城配送 </a-select-option>
          </a-select>
        </div>
        <a-button type="primary" @click="getList">查询</a-button>
      </div>
    </tabList>
    <a-card :bordered="false" class="card_style_re" style="margin-top: 20px">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.shop_audit" @change="getList">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="0"> 待发货 </a-radio-button>
          <a-radio-button value="1"> 已发货 </a-radio-button>
          <a-radio-button value="1"> 已取消 </a-radio-button>
        </a-radio-group>
        <div>
          <a-button type="primary" @click="showCreated = true">+ 新增</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="allDelete">批量删除</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div>
      </div>
      <a-alert type="info" show-icon style="margin: 10px 0" v-if="selectedRowKeys.length">
        <span slot="message">
          已选择 <span style="color: red">{{ selectedRowKeys.length }}</span> 项
        </span>
      </a-alert>
      <orderTable ref="listTable" :list_th="list_th" :pagaData="list" @triggerAction="listActions"> </orderTable>
      <div style="text-align: right">
        <a-pagination v-model="queryParam.pageNo" :total="total" show-less-items />
      </div>
    </a-card>
    <!-- 创建商户弹窗 -->
    <a-modal
      title="创建商户"
      width="800px"
      v-model="showCreated"
      @ok="showCreated = false"
      :afterClose="closeModal"
      :destroyOnClose="true"
    >
      <a-form-model
        ref="ruleForm"
        :model="creatForm"
        :rules="creatRules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
      >
        <span>商品信息</span>
        <a-form-model-item label="商品名称" prop="desc">
          <a-input v-model="creatForm.desc" placeholder="请输入商品名称" />
        </a-form-model-item>
        <a-form-model-item label="商品规格" prop="region">
          <a-select v-model="creatForm.region" placeholder="请选择商户类型">
            <a-select-option value="shanghai"> Zone one </a-select-option>
            <a-select-option value="beijing"> Zone two </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-divider />
        <span>价格设置</span>
        <a-form-model-item label="单价" prop="desc">
          <a-input v-model="creatForm.desc" addon-after="元" placeholder="请输入单价" />
        </a-form-model-item>
        <a-form-model-item label="数量" prop="desc">
          <a-input v-model="creatForm.desc" addon-after="件" placeholder="请输入数量" />
        </a-form-model-item>
        <a-form-model-item label="运费" prop="desc">
          <a-input v-model="creatForm.desc" addon-after="元" placeholder="请输入运费" />
          <span class="tip">首重10元（一公斤内），续重每公斤5元</span>
        </a-form-model-item>
        <a-form-model-item label="金额" prop="desc">
          <a-input v-model="creatForm.desc" addon-after="元" placeholder="请输入金额" />
          <span class="tip">本次采购订单总金额</span>
        </a-form-model-item>
        <a-divider />
        <span>收货人信息</span>
        <a-form-model-item label="收货人" prop="desc">
          <a-input v-model="creatForm.desc" placeholder="请输入收货人" />
        </a-form-model-item>
        <a-form-model-item label="电话" prop="desc">
          <a-input v-model="creatForm.desc" placeholder="请输入电话" />
        </a-form-model-item>
        <a-form-model-item label="收货地址" prop="region">
          <a-select v-model="creatForm.region" placeholder="请选择收获地址">
            <a-select-option value="shanghai"> Zone one </a-select-option>
            <a-select-option value="beijing"> Zone two </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="详细地址" prop="desc">
          <a-input v-model="creatForm.desc" placeholder="请输入楼栋、门牌号等" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { setDel } from '@/api/share'
import tabList from '@/views/saas/components/tabList.vue'
import orderTable from '@/views/saas/components/orderTable.vue'
import { cyyUploadImg } from '@/components/CyyUi'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商品名称',
    scopedSlots: {
      customRender: 'name',
    },
    width: 200,
  },
  {
    title: '售价',
    dataIndex: 'mobile',
    sorter: (a, b) => a.created_at - b.created_at,
  },
  {
    title: '规格',
    dataIndex: 'address',
  },
  {
    title: '状态',
    width: 120,
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action',
    },
  },
]

export default {
  components: {
    tabList,
    cyyUploadImg,
    orderTable,
  },
  data() {
    return {
      tabList: [
        {
          key: 'purchaseOrderList',
          name: '采购单列表',
        },
        {
          key: 'purchaseOrderRecord',
          name: '采购记录',
        },
      ],
      // 搜索参数
      queryParam: {
        order_no: null,
        name: null,
        pageNo: 1,
      },
      // 数据总数
      total: 0,
      selectedRowKeys: [],
      columns,
      list: [],
      // 是否显示创建供货商弹窗
      showCreated: false,
      // 新增 编辑供货商的表单
      businessForm: {
        logo: '',
      },
      businessRules: {},
      list_th: [
        { type: 'list', title: '商品信息', span: 5 },
        { type: 'list', title: '单价/数量', span: 3 },
        { type: 'list', title: '订单金额', span: 3 },
        { type: 'list', title: '买家/收货人', span: 4 },
        { type: 'list', title: '订单状态', span: 3 },
        {
          type: 'list',
          title: '操作',
          span: 4,
          actions: ['编辑', '发货', '取消', '核销', '确认收货', '订单打印', '小票打印', '添加备注', '移入回收站'],
        },
      ],
      // 创建采购单表单
      creatForm:{},
      creatRules:{}
    }
  },
  created() {},
  methods: {
    // 关闭弹窗的回调
    closeModal() {},
    // 分页请求
    tablePageChange(e) {
      this.queryParam.pageNo = e
      this.getList()
    },
    // 获取数据
    getList() {},
    listActions(name, row, reason) {
      console.log('操作', name)
      switch (name) {
        case 'order_edit': //编辑
          this.$router.push({ name: 'OrderDetails', query: { order_id: row.id } })
          break
        case 'order_send': //发货
          this.orderId = row.id
          this.orderInfo = row
          this.isShowSendModal = true
          break
        case 'order_cancel': //取消
          this.cancel(row, 1, 1, reason)
          break
        case 'order_cancel_0': //取消
          this.cancel(row, 0, 0, reason)
          break
        case 'order_cancel_1': //取消
          this.cancel(row, 1, 0, reason)
          break
        case 'order_cancel_verification': //核销
          this.clerk(row.id)
          break
        case 'order_confirm': //确认收货
          this.confirm(row.id)
          break
        case 'order_print': //打印订单
          console.log(name)
          this.orderInfo = row
          this.isShowPrintModal = true
          // this.orderTable(row)
          break
        case 'order_receipts_print': //打印小票
          console.log(name)
          this.orderPrint(row)
          break
        case 'order_remark': //添加备注
          this.orderRemark(row)
          break
        case 'order_recycle': //移入回收站
          console.log(name)
          this.orderRecycle(row)
          break
        case 'order_address': //修改地址
          this.orderId = row.id
          this.isShowAddressModal = true
          break
        case 'apply_0': //拒绝取消
          console.log(name)
          break
        case 'apply_1': //同意取消
          console.log(name)
          break
        default:
          break
      }
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}
.tip {
  line-height: normal;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
</style>
